<template>
	<div>
		<el-container class="home-container">
			<el-header>
				<el-menu mode="horizontal" :default-active="this.$route.path" router>
					<el-menu-item index="/buyer/mine">我的</el-menu-item>
				</el-menu>
				
				<el-menu mode="horizontal" :default-active="this.$route.path" router>
				
					<el-menu-item index="/buyer/home">首页商品</el-menu-item>
					<!-- 二级菜单 -->
					<el-submenu index="2">
						<template slot="title" >商品分类</template>
						<el-menu-item index="s1" v-for="item in category_list" :key="item.id" @click="togoodlist(item.name)">{{ item.name }}</el-menu-item>
					</el-submenu>
					
					<el-menu-item index="/buyer/goodcar" >购物车</el-menu-item>
					<el-menu-item index="/buyer/order">订单</el-menu-item>
					<el-menu-item index="s3" @click="layout()">退出</el-menu-item>
				</el-menu>

			</el-header>
			<el-main>
				<router-view></router-view>
			</el-main>
		</el-container>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				username: window.sessionStorage.getItem("username"),
				category_list: "",
			}
		},
		created() {
			this.getCategory();
		},
		methods: {
			async layout() {
				const {
					data: res
				} = await this.$http.get("userapi/login/?action=layout", {
					params: {
						"token": window.localStorage.getItem("token")
					}
				});
				if (res.status == 1000) {
					this.$message.success("退出成功");
					window.sessionStorage.clear();
					window.localStorage.clear();
					this.$router.push("/");
				} else {
					this.$message.error("退出失败");
				}
			},
			async getCategory(){
				const {data: res} = await this.$http.get('categoryapi/operation/list/', {
					params: {
						"token": window.sessionStorage.getItem("token")
					}
				});
				// console.log(res);
				this.category_list = res.results
			},
			togoodlist(name) {
				// console.log(name);
				this.$router.push({
					path: "/buyer/goodlist",
					query: {
						"category": name
					}
				});
			}

		}
	}
</script>

<style lang="less" scoped="scoped">
	.el-header {
		background-color: #ffaaac;
		display: flex;
		justify-content: space-between;
		color: white;
		align-items: center;
		font-size: 1.25rem;
	}

	.el-main {
		background-color: #f0f0f0;
		color: #333;
		text-align: center;
		// line-height: 160px;
		height: 100%;
	}

	.home-container {
		height: 100% !;
	}
	.el-menu {
		background-color: #ffaaac;
		border: 0;
	}
</style>
